
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
.nianli{
    border: 2px solid red;
    display: grid;
    grid-template-columns: repeat(6,auto);
    gap:10px;
    padding: 10px;
}
.title{
    color: red;
    text-align: center;
    line-height: 2;
}
.yueli{
    border: 1px solid blue;
    padding: 5px;
}
.data{
    display: grid;
    grid-template-columns: repeat(7,auto);
}
.date>div{
    text-align: center;
}
.yue{
    color:red;
    font-weight: bold;
    text-align: center;
    line-height: 2;
}
    </style>
    <title>年历</title>
</head>
<body>
<div class='kuang'>
    <select>
        <option value="2025">2025</option>
        <option value="2024">2024</option>
        <option value="2023">2023</option>
        <option value="2022">2022</option>
    </select>
    <div class="title">2025年</div>
    <div class='nianli'>
        <div class='yueli'>
            <div class='yue'>1月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>2月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>3月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>4月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>5月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>6月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>7月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>8月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>9月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>10月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>11月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div></div><div></div><div></div><div></div><div></div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
            </div>
        </div>
        <div class='yueli'>
            <div class='yue'>12月</div>
            <div class='data'>
                <div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div><div>31</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
